<template>
  <view class="directSales">
    <view class="contain">
      <view class="img"> <img :src="directDetail.image" alt="" /></view>
      <view class="bottom_box">
        <view class="left">
          <view class="title">{{ directDetail.title }}</view>
          <view class="center">
            <view class="price">
              <view class="fuhao">￥</view>
              <view class="price_text">{{ directDetail.price }}</view>
            </view>
            <view class="label" v-if="directDetail.tag">{{
              directDetail.tag
            }}</view>
          </view>
          <view class="total">
            <view class="kc_num">库存 {{ directDetail.stock }} 件</view>
            <view class="xl_num">销量 {{ directDetail.sale_total }} 件</view>
          </view>
        </view>
        <view class="logo_img">
          <img
            :src="
              $IMG_URL +
              '/uploads/20230516/3435ff3ffc351c85bfc53a2863aef915.png'
            "
            alt=""
            mode="heightFix"
          />
        </view>
      </view>
    </view>
    <view class="center_box">
      <view class="xian"></view>
      <text class="xian_detail">商品详情</text>
      <view class="xian"></view>
    </view>
    <view class="detail_img">
      <!-- <img
        :src="
          $IMG_URL + '/uploads/20230516/7ba7c416d5d523cc0ea218d3891202ea.png'
        "
        alt=""
        mode="widthFix"
      /> -->
      <rich-text :nodes="directDetail.content"></rich-text>
    </view>
    <view class="bottom">
      <view class="top_box">
        <view class="left">
          <view class="main_title">{{ directDetail.title }}</view>
          <view class="second_title">{{ directDetail.subtitle }}</view>
        </view>
        <view class="right">
          <u-number-box
            v-model="num"
            @change="numChange"
            :min="1"
          ></u-number-box>
          <view class="price">
            <view class="fuhao">￥</view>
            <view class="price_text">{{
              Number(directDetail.price) * num
            }}</view>
          </view>
        </view>
      </view>
      <view class="bottom_btn" @click="toCreateOrder">立即支付</view>
    </view>
    <view class="server">
      <u-icon name="server-fill" color="#A084F0" size="38"></u-icon>
      <view class="text">客服</view>
    </view>
    <view class="forward">
      <u-icon name="zhuanfa" color="#A084F0" size="38"></u-icon>
      <view class="text">分享</view>
    </view>
    <shopro-pay-model
      @change-pay-mod="changePayMod"
      @payed="onPayed"
      v-if="payModOpen"
      activity-type="direct_goods"
      :details="payDetails"
    ></shopro-pay-model>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  data() {
    return {
      num: 1, //购买数量
      id: '', //商品ID
      directDetail: {},
      payModOpen: false,
      payDetails: {},
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e) {
    this.id = e.id;
    this.getdirectDetail();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapMutations(['CartOnshow']),
    numChange() {},
    //获取直购和预售商品列表
    getdirectDetail() {
      this.$http(
        'v1.getgoodsDetail',
        {
          id: this.id,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          this.directDetail = res.data;
          console.log(this.directDetail);
        }
      });
    },
    //创建交易订单弹出支付层
    createDirectOrder() {
      this.$http(
        'v1.createOrder',
        {
          activity_type: 'goods',
          goods_id: this.id,
          goods_num: this.num,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          this.payModOpen = true;
          this.payDetails.total_amount = res.data.total_amount;
          this.payDetails.discounts_amount = res.data.discounts_amount;
          this.payDetails.original_amount = res.data.original_amount;
          this.payDetails.order_sn = res.data.order_sn;
          this.payDetails.money = res.data.money;
        }
      });
    },
    toCreateOrder() {
      _delay(() => {
        this.createDirectOrder();
      });
    },
    // 显示隐藏支付
    changePayMod(ev) {
      this.payModOpen = ev;
      this.payDetails = {};
    },
    //支付结果
    onPayed() {
      this.payModOpen = false;
      this.CartOnshow(true);
      uni.showToast({
        title: '支付成功',
        duration: 2000,
        icon: 'success',
        success: (res) => {
          setTimeout(() => {
            uni.switchTab({
              url: 'pages/index/cart',
            });
          }, 2000);
        },
        fail: (res) => {},
        complete: (res) => {},
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.directSales {
  overflow: auto;
  .contain {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    .img {
      width: 100%;
      height: 656rpx;
      img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx 20rpx 0 0;
      }
    }
    .bottom_box {
      display: flex;
      justify-content: space-between;
      padding-left: 58rpx;
      padding-right: 72rpx;
      .left {
        width: 400rpx;
        height: 182rpx;
        .title {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #07001a;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 100%;
          margin-top: 22rpx;
          margin-bottom: 24rpx;
        }
        .center {
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          .price {
            vertical-align: bottom;
            line-height: 1;
            .fuhao {
              display: inline-block;
              font-size: 36rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #a084f0;
            }
            .price_text {
              display: inline-block;
              font-size: 36rpx;
              font-family: DIN-Bold;
              font-weight: 700;
              color: #a084f0;
            }
          }
          .label {
            background: #fff2e1;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            opacity: 1;
            border: 1rpx solid #fff2e1;
            font-size: 18rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #ffa974;
            margin-left: 20rpx;
            padding: 6rpx 10rpx;
            line-height: 1;
          }
        }
        .total {
          display: flex;
          height: 40rpx;
          justify-content: flex-start;
          align-items: center;
          margin-top: 20rpx;
          .kc_num {
            font-size: 20rpx;
            font-family: DIN-Bold;
            font-weight: 400;
            color: #979797;
            margin-right: 30rpx;
          }
          .xl_num {
            font-size: 20rpx;
            font-family: DIN-Bold;
            font-weight: 400;
            color: #979797;
          }
        }
      }
      .logo_img {
        height: 182rpx;
        img {
          height: 100%;
        }
      }
    }
  }
  .center_box {
    width: 100%;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38rpx;
    margin-bottom: 20rpx;
    .xian {
      width: 140rpx;
      height: 0rpx;
      border-bottom: 1rpx solid #d8d8d8;
    }
    .xian_detail {
      margin-left: 15rpx;
      margin-right: 15rpx;
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
  }
  .detail_img {
    width: 100%;
    margin-bottom: 230rpx;
    img {
      width: 100%;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 225rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 0 30rpx;
    .top_box {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 14rpx 16rpx;
      height: 119rpx;
      width: 100%;
      border-bottom: 1rpx solid #d8d8d8;
      .left {
        width: 400rpx;
        .main_title {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #07001a;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
        .second_title {
          width: 100%;
          font-size: 18rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 350;
          color: #666666;
          margin-top: 6rpx;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        //进步器的自定义样式
        /deep/ .u-number-input {
          border: 1rpx solid #979797;
          margin: 0 !important;
          width: 84rpx !important;
          height: 40rpx !important;
        }
        /deep/ .u-icon-plus {
          border-radius: 0 10rpx 10rpx 0 !important;
          background: #fff !important;
          border: 1rpx solid #979797 !important;
          border-left: none !important;
          width: 41rpx !important;
          height: 40rpx !important;
        }
        /deep/ input {
          min-height: 0 !important;
        }
        /deep/ .u-icon-minus {
          border-radius: 10rpx 0 0 10rpx !important;
          background: #fff !important;
          border: 1rpx solid #979797 !important;
          border-right: none !important;
          width: 41rpx !important;
          height: 40rpx !important;
        }
        .price {
          .fuhao {
            font-size: 36rpx;
            font-family: Source Han Sans CN-Normal, Source Han Sans CN;
            font-weight: 350;
            color: #de3249;
            display: inline-block;
          }
          .price_text {
            font-size: 36rpx;
            font-family: DIN-Bold;
            font-weight: 700;
            color: #de3249;
            display: inline-block;
          }
        }
      }
    }
    .bottom_btn {
      width: 100%;
      height: 80rpx;
      margin-top: 16rpx;
      margin-bottom: 10rpx;
      background: #a084f0;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
  }
  .server {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 32rpx;
    right: 30rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.302);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    .text {
      font-size: 20rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
  }
  .forward {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 128rpx;
    right: 30rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.302);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    .text {
      font-size: 20rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
  }
}
</style>
